<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <div class="btn-top">
        <span data-v-48e452ac="" style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
        <el-button class="el-btn" type='success' size="small" @click="$router.push('/questions/new')">新增试题</el-button>
        </div>
        <!-- form表单区域 -->
        <el-form :model='form' ref='form'>
          <el-row>
            <el-form-item label='学科' prop="subjectID" class="el-col el-col-6" label-width="80px">
              <el-select  v-model='form.subjectID'  placeholder='请选择' size="small" style='width:100%'>
                <el-option
                               v-for="item in subject"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                </el-option>
               </el-select>
            </el-form-item>
             <el-form-item prop="two"  label='二级目录' class="el-col el-col-6" label-width="80px">
              <el-select v-model='form.two'  placeholder='请选择' size="small" style='width:100%'>
              </el-select>
            </el-form-item>
            <el-form-item prop="tags"  label='标签' class="el-col el-col-6" label-width="80px">
              <el-select v-model='form.tags' placeholder='请选择' size="small" style='width:100%'>
              </el-select>
            </el-form-item>
            <el-form-item prop="keyword" label='关键字' class="el-col el-col-6" label-width="80px">
              <el-input v-model='form.keyword' placeholder="请根据题干搜索"></el-input>
            </el-form-item>
             <el-form-item  prop="questionType"  label='试题类型' class="el-col el-col-6" label-width="80px">
              <el-select v-model='form.questionType' placeholder='请选择' size="small" style='width:100%'>
                 <el-option
                          v-for="item in twoLT"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
             <el-form-item prop="difficulty"    label='难度' class="el-col el-col-6" label-width="80px">
              <el-select v-model='form.difficulty' placeholder='请选择' size="small" style='width:100%'>
                <el-option
                               v-for="item in difficulty"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
             <el-form-item prop="direction"  label='方向' class="el-col el-col-6" label-width="80px">
              <el-select v-model='form.direction' placeholder='请选择' size="small" style='width:100%'>
                  <el-option
                               v-for="item in direction"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
             <el-form-item  prop="creatorID" label='录入人' class="el-col el-col-6" label-width="80px">
              <el-select v-model='form.creatorID' placeholder='请选择' size="small" style='width:100%'>
                 <el-option
                               v-for="item in man"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
             <el-form-item prop="remarks"  label='题目备注' class="el-col el-col-6" label-width="80px">
              <el-input v-model='form.remarks'></el-input>
            </el-form-item>
            <el-form-item  label='企业简称' class="el-col el-col-6" label-width="80px">
              <el-input v-model='form.catalogID'></el-input>
            </el-form-item>
            <el-form-item prop="city"  label='城市' class="el-col el-col-6" label-width="80px">
              <el-select  @change='gai' v-model='form.provinces' placeholder='请选择' size="small" style='width:48%; margin-right:2%'>
                   <el-option
                               v-for="item in provinces"
                              :key="item"
                              :label="item"
                              :value="item">
                </el-option>
              </el-select>
              <el-select v-model='form.citys'  placeholder='请选择' size="small" style='width:50%'>
                <el-option
                               v-for="item in city"
                              :key="item"
                              :label="item"
                              :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: -55px;"  class="el-col ct el-col-6" label-width="190px" >
              <el-button size="small" @click='reset(form)'>清除</el-button>
              <el-button type='primary' size="small" @click='search'>搜索</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!-- alert提示 -->
        <div  role="alert" class="el-alert alert el-alert--info is-light" style="margin-bottom: 15px;"><i class="el-alert__icon el-icon-info"></i><div class="el-alert__content"><span class="el-alert__title">数据一共 7 条</span><!----><!----><i class="el-alert__closebtn el-icon-close" style="display: none;"></i></div></div>
        <!-- table表单 -->
        <el-table :data='tableData'  style="width: 100%">
          <el-table-column prop="number" label='试题编号' width="120"></el-table-column>
          <el-table-column prop="subject" label='学科'></el-table-column>
          <el-table-column prop="catalog" label='目录'></el-table-column>
          <el-table-column prop="questionType" label='题型'></el-table-column>
          <el-table-column prop='question'  label='题干' width="280">
            <template slot-scope="{row}" >
              {{delHtmlTag(row.question)}}
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label='录入时间' width="180">
            <template slot-scope="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label='难度'></el-table-column>
          <el-table-column prop="creator" label='录入人'></el-table-column>
          <el-table-column label='操作' width="180">
               <template #default="{row}">
            <button type="button" @click='opdetail(row)' class="el-button el-button--primary el-button--small is-plain is-circle" title="预览"><i class="el-icon-view"></i></button>
            <button type="button" @click='edit(row.id)' class="el-button el-button--success el-button--small is-plain is-circle" title="修改"><i class="el-icon-edit"></i></button>
            <button type="button" @click='handleClose(row)' class="el-button el-button--danger el-button--small is-plain is-circle" title="删除"><i class="el-icon-delete"></i></button>
            <button type="button" @click='rtlink(row)' class="el-button el-button--warning el-button--small is-plain is-circle" title="加入精选"><i class="el-icon-check"></i></button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
          <el-pagination
            background
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 8, 10, 15]"
      :page-size="pagesize"
      layout="  prev, pager, next,sizes ,jumper"
      :total="total">
    </el-pagination>
    <!-- 回显 -->
     <!-- 回显 -->
    <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="53%"
  :before-close="handleClosed"
  @close='close'>
  <button type="button" @click="dialogVisible = false" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
  <div class="dialog-body">
    <div class="el-row">
      <div class="el-col el-col-6 ">【题型】：{{detailList.questionType}}</div>
      <div class="el-col el-col-6 ">【编号】：{{detailList.id}}</div>
      <div class="el-col el-col-6 ">【难度】：{{detailList.difficulty}}</div>
      <div class="el-col el-col-6 ">【标签】：{{detailList.tags}}</div>
      <div class="el-col el-col-6 ">【学科】：{{detailList.subjectName}}</div>
      <div class="el-col el-col-6 ">【目录】：{{detailList.directoryName}}</div>
      <div class="el-col el-col-6 ">【方向】：{{detailList.direction}}</div>
    </div>
    <hr>
     【题干】：
     <div style="color: blue;"><p v-html="detailList.question"></p></div>
     <!-- 单选 -->
     <div type='onlyone' v-if="detailList.questionType==='单选题'">
      <div   style="padding-bottom: 5px;">单选题 选项：（以下选中的选项为正确答案）</div>
      <!-- 单选 -->
      <div class="onlyone" v-for='item in detailList.options' :key='item.id'>
        <el-radio :label="1" v-model="item.isRight" >{{item.title}}</el-radio>
      </div>
     </div>
     <!-- 多选 -->
     <div type='more' v-else-if="detailList.questionType==='多选题'">
      <div   style="padding-bottom: 5px;">多选题 选项：（以下选中的选项为正确答案）</div>
      <!-- 多选 -->
      <div class="morecheck" v-for='item in detailList.options' :key='item.id'>
        <el-Checkbox :checked='item.isRight' >{{item.title}}</el-Checkbox>
      </div>
     </div>
     <!-- 简答 -->
     <div type='more' v-else-if="detailList.questionType==='简答题'">
      <!-- 简答部分 -->
      <div class="easy" >
      </div>
     </div>
     <hr>
      【参考答案】：
      <button @click='openVideo' type="button" class="el-button el-button--danger el-button--small"><!----><!----><span>视频答案预览</span></button>
      <div  class="video" style="display: none;"><video  controls="controls" :src="detailList.videoURL"></video></div>
      <hr>
   【答案解析】：
   <div data-v-61b2ab32="" style="display: inline-block;" v-html="detailList.answer"></div>
   <hr>
  【题目备注】
    <div style="display: inline-block;" v-html="detailList.remarks"></div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="close">关闭</el-button>
  </span>
</el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple } from '@/api/hmmm/subjects'

export default {
  data () {
    return {
      form: {
        subjectID: null,
        two: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        catalogID: '',
        provinces: '',
        citys: ''

      },
      detailList: [],
      dialogVisible: false,
      tableData: [],
      page: 1,
      pagesize: 5,
      total: 0,
      twoLT: [
        { value: 1, label: '单选' },
        { value: 2, label: '多选' },
        { value: 3, label: '简答' }
      ],
      subject: [
        // { value: 1, label: 'java' },
        // { value: 2, label: 'ios' },
        // { value: 3, label: 'c#' },
        // { value: 4, label: '前端' },
        // { value: 5, label: '设计' },
        // { value: 6, label: '算法' },
        // { value: 7, label: '数据库' },
        // { value: 8, label: 'c++' },
        // { value: 9, label: '产品' },
        // { value: 10, label: '运维' },
        // { value: 11, label: 'php' },
        // { value: 12, label: '安卓' },
        // { value: 13, label: 'c' },
        // { value: 14, label: 'python' }
      ],
      difficulty: [
        { value: 1, label: '简单' },
        { value: 2, label: '一般' },
        { value: 3, label: '困难' }
      ],
      direction: [
        { value: 1, label: 'o2o' },
        { value: 2, label: '外包服务' },
        { value: 3, label: '企业服务' },
        { value: 4, label: '互联网金融' },
        { value: 5, label: '企业咨询' },
        { value: 6, label: '互联网' },
        { value: 7, label: '电子商务' },
        { value: 8, label: '其他' }
      ],
      man: [
        { value: 1, label: '超级管理员' },
        { value: 2, label: '录入管理员' },
        { value: 3, label: 'demo' }
      ],
      provinces: [],
      city: []
    }
  },
  async created () {
    this.initData()
    this.provinces = await provinces()
    // console.log(this.provinces)
    // this.citys = await citys()
    // console.log(this.citys)
    const { data } = await simple()
    this.subject = data
    console.log(this.subject)
  },
  methods: {
    async gai () {
      this.form.citys = ''
      const city = await citys(this.form.provinces)
      console.log(city)
      this.city = city
    },
    close () {
      this.dialogVisible = false
      const v1 = document.querySelector('.video')
      v1.style.display = 'none'
    },
    openVideo () {
      const v1 = document.querySelector('.video')
      v1.style.display = 'block'
    },
    // 回显
    async opdetail (id) {
      this.dialogVisible = true
      const { data } = await detail(id)
      console.log(data)
      this.detailList = data
      console.log(this.detailList)

      if (this.detailList.difficulty === '1') {
        this.detailList.difficulty = '简单'
      } else if (this.detailList.difficulty === '2') {
        this.detailList.difficulty = '普通'
      } else if (this.detailList.difficulty === '3') {
        this.detailList.difficulty = '困难'
      }

      if (this.detailList.questionType === '1') {
        this.detailList.questionType = '单选题'
      } else if (this.detailList.questionType === '2') {
        this.detailList.questionType = '多选题'
      } else if (this.detailList.questionType === '3') {
        this.detailList.questionType = '简答题'
      }
    },
    handleClosed (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.close()
          done()
        })
        .catch(_ => {})
    },
    // 清空
    reset () {
      this.form.provinces = ''
      this.form.citys = ''
      this.$refs.form.resetFields()
    },
    // 搜索
    search () {
      this.page = 1
      this.initData()
    },
    // 修改传参
    edit (id) {
      this.$router.push(
        { path: '/questions/new', query: { id: id } }
      )
    },
    // 提示是否添加
    rtlink (data) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        // this.del(data)
        this.$router.push(`/questions/choice/?id=${data.id}`)
        const res = await choiceAdd({ id: data.id, choiceState: 1 })
        console.log(res)
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
      }).catch(() => {
      })
    },
    // 提示是否删除
    handleClose (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.del(data)
      }).catch(() => {
      })
    },
    // 删除
    async del (data) {
      await remove(data)
      if (this.tableData.length === 1 && this.page > 1) {
        this.page--
      }
      this.initData()
    },
    // 时间格式化
    formatDate (dateString) {
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = `0${date.getMonth() + 1}`.slice(-2)
      const day = `0${date.getDate()}`.slice(-2)
      const hour = `0${date.getHours()}`.slice(-2)
      const minute = `0${date.getMinutes()}`.slice(-2)
      const second = `0${date.getSeconds()}`.slice(-2)
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    // 问题格式化
    delHtmlTag (str) {
      return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, '')
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.initData()
    },
    handleCurrentChange (val) {
      this.page = val
      this.initData()
    },
    // 初始化
    async initData () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize, subjectID: this.form.subjectID, keyword: this.form.keyword })
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
      this.tableData.map((item) => {
        if (item.questionType === '1') {
          item.questionType = '单选题'
        } else if (item.questionType === '2') {
          item.questionType = '多选题'
        } else if (item.questionType === '3') {
          item.questionType = '简答题'
        }

        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '普通'
        } else if (item.difficulty === '3') {
          item.difficulty = '困难'
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
*{
  overflow: hidden;
}
 .el-form-item__content{
  margin-left: 100px;
}
.btn-top{
  height: 32px;
  margin-bottom: 15px;
}
  .el-btn{
    padding: 9px 15px;
    float: right;
  }
  .el-col{
    float: left;
  }
  .el-col-6{
    width: 25%;
  }
  // .el-form-item__content{
  //   margin-left: 80px;
  // }
  .el-pagination{
    margin-top: 20px;
    text-align: right;
  }
  .el-dialog__footer{
    .el-button{
      position: absolute;
      right: 15px;
      bottom: 20px;
    }
  }
</style>
